<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主页</title>
		<link rel="stylesheet" href="css/index.css">
		<script src="js/vue.min.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mycommon.js"></script>
		<style>
			.el-carousel__item h3 {
				color: #475669;
				opacity: 0;
				margin: 0;
			}

			.el-carousel__item:nth-child(2n) {
				background-image: url("img/2.jpg");
				background-repeat: no-repeat;
				background-size: 100%;
			}

			.el-carousel__item:nth-child(2n+1) {
				background-size: 100%;
				background-image: url("img/3.jpg");
				background-repeat: no-repeat;
			}

			.el-breadcrumb {
				position: absolute;
				top: 0px;
			}

			#box2 {
				width: 600px;
				height: 280px;
			}

			.el-button {
				position: absolute;
				left: 480px;
				top: 20px;
			}

			#box3 {
				width: 480px;
				height: 240px;
				position: absolute;
				left: 800px;
				bottom: 260px;	
			}
		</style>
	</head>
	<body>
		<div id="box1">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item><i class="el-icon-s-home"></i> <a href="index.html"
						target="_top">首页</a></el-breadcrumb-item>
				<el-breadcrumb-item>主页</el-breadcrumb-item>
			</el-breadcrumb>
			<template>
				<el-carousel :interval="2000" type="card" height="300px">
					<el-carousel-item v-for="item in 3" :key="item">
						<h3 class="medium">{{ item }}</h3>
					</el-carousel-item>
				</el-carousel>
			</template>
			<div id="box2">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column label="今日优惠套餐" width="180">
						<template slot-scope="scope">
							<el-tag size="mini">{{ scope.row.name }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="name2" label="" width="200">
					</el-table-column>
					<el-table-column prop="name3" label="" width="200">
					</el-table-column>
				</el-table>
				<el-row>
					<el-button type="success" round size="small" @click="open">预约购票</el-button>
				</el-row>
			</div>
			<div id="box3">
				<el-table :data="tableData2" style="width: 100%">
					<el-table-column label="公告栏" width="80">
						<template slot-scope="scope">
							<el-tag size="mini">{{ scope.row.name }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="name2" label="" width="200">
					</el-table-column>
					<el-table-column prop="name3" label="" width="200">
					</el-table-column>
				</el-table>
			</div>
		</div>
		<script>
			new Vue({
				el: "#box1",
				data: {
					tableData: [{
						name: '套餐一',
						name2: '48元单人不限时撸猫体验卷:',
						name3: '单人不限时撸猫体验卷:',

					}, {
						name: '套餐二',
						name2: '58元单人不限时撸猫体验卷:',
						name3: '单人不限时撸猫体验卷:',
					}, {
						name: '套餐三',
						name2: '68元单人不限时撸猫体验卷:',
						name3: '单人不限时撸猫体验卷:',
					}, {
						name: '套餐四',
						name2: '78元单人不限时撸猫体验卷:',
						name3: '单人不限时撸猫体验卷:',
					}],
					tableData2: [{
						name: '一、',
						name2: '48元单人不限时撸猫体验卷:',
						name3: '单人不限时撸猫体验卷:',

					}, {
						name: '二、',
						name2: '58元单人不限时撸猫体验卷:',
						name3: '单人不限时撸猫体验卷:',
					}, {
						name: '三、',
						name2: '68元单人不限时撸猫体验卷:',
						name3: '单人不限时撸猫体验卷:',
					}, {
						name: '四、',
						name2: '78元单人不限时撸猫体验卷:',
						name3: '单人不限时撸猫体验卷:',
					}]
				},
				methods:{
					open(){
						
					}
				}
			})
		</script>
	</body>
</html>